//引入React
import React, { Component } from 'react'

//1.引入路由
//Switch路由视图 Route路由规则 Redirect重定向
import { Switch, Route, Redirect, NavLink } from 'react-router-dom'

//2.引入header头部组件
import Header from '../../components/Header/Header'

// //3.引入小主页
// import Home from '../Home/Home'
// //4.引入小分类
// import Cate from '../Cate/Cate'

// //5.引入个人中心
// import Mine from '../Mine/Mine'
// //6.引入购物车
// import Shop from '../Shop/Shop'

//7.引入less
import './Index.less'

//8.引入路由组件
import { SpinLoading } from 'antd-mobile'


//实现路由懒加载
//1. 使用React.lazy
const Home = React.lazy(() => import('../Home/Home'))
const Cate = React.lazy(() => import('../Cate/Cate'))
const Mine = React.lazy(() => import('../Mine/Mine'))
const Shop = React.lazy(() => import('../Shop/Shop'))


export default class Index extends Component {
    render() {
        return (
            <div className='index'>
                <Header title='主页'></Header>
                {/* 配置路由 */}
                {/* 1.路由视图 展示二级路由视图 */}

                {/* 2.再使用React.Suspense将Switch包裹 即可实现路由懒加载 */}
                <React.Suspense fallback={<SpinLoading style={{ '--size': '48px' }} />}>
                    <Switch>
                        <Route path='/index/home' component={Home}></Route>
                        <Route path='/index/cate' component={Cate}></Route>
                        {/* <Route path='/index/mine' component={Mine}></Route> */}

                        <Route path='/index/mine' render={(props) => {
                            console.log(props);

                            let isLogin = JSON.parse(localStorage.getItem('isLogin'))
                            //如果isLogin.phone是111用户,则跳转到首页,不是111用户则可以跳转到个人中心
                            if (isLogin.phone === '111') {
                                //原生跳转到home组件
                                window.open('/#/index/home',"_self")
                                // return <Home {...props}></Home>
                            }
                            //这里的props相当于让Mine变成了路由 props中有history包含了路由路径,相当于withRouter使Mine组件也变为了路由组件，有路由信息
                            return <Mine {...props}></Mine>
                        }}></Route>
                        <Route path='/index/shop' component={Shop}></Route>
                    </Switch>
                </React.Suspense>

                {/* 底部导航 */}
                {/* NavLink和Link的区别在于  NavLink可以实现动态类名切换颜色 Link不可以 */}
                {/* activeClassName实现颜色类名的切换 */}
                <footer>
                    <NavLink activeClassName='active' to="/index/home">
                        <i className='iconfont icon-shouye'></i>
                        <div>首页</div>
                    </NavLink>
                    <NavLink activeClassName='active' to="/index/cate">
                        <i className='iconfont icon-fenlei'></i>
                        <div>分类</div>
                    </NavLink>
                    <NavLink activeClassName='active' to="/index/shop">
                        <i className='iconfont icon-gouwucheman'></i>
                        <div>购物车</div>
                    </NavLink>
                    <NavLink activeClassName='active' to="/index/mine">
                        <i className='iconfont icon-gerenzhongxin'></i>
                        <div>我的</div>
                    </NavLink>
                </footer>
            </div>
        )
    }
}
